<template>
   <div class="profile-nav-bg" :style="bgStyle()"></div>
    <!-- User Profile Card -->
    <a-card :bordered="false" class="card-profile-head" :bodyStyle="{ padding: 0, }">
        <template #title>
            <a-row type="flex" align="middle">
                <a-col :span="24" :md="12" class="col-info">
                    <a-avatar :size="74" shape="square" :src="avatar" />
                    <div class="avatar-info">
                        <h4 class="font-semibold m-0"> {{ name }}</h4>
                        <p>{{ intro }}</p>
                    </div>
                </a-col>
                <a-col :span="24" :md="12" style="display: flex; align-items: center; justify-content: flex-end">
                    <!--right slot 右侧覆写插槽-->
                    <slot>
                        <a-radio-group :value="activeVal" size="small">
                            <a-radio-button value="overview">OVERVIEW</a-radio-button>
                            <a-radio-button value="teams">TEAMS</a-radio-button>
                            <a-radio-button value="projects">PROJECTS</a-radio-button>
                        </a-radio-group>
                    </slot>
                </a-col>
            </a-row>
        </template>
    </a-card>
</template>

<script setup>
const emit = defineEmits(['change'])
const props = defineProps({
    bgUrl:{
        type:String,
        default:'images/bg-profile.jpg'
    },
    bgTop:{
        type:Number,
        default:0
    },
    // 用户头像
    avatar: {
        type: String,
        default: './images/face-1.jpg'
    },
    name: {
        type: String,
        default: 'Sarah Jacob'
    },
    intro: {
        type: String,
        default: 'CEO / Co-Founder'
    }
})
// Active button for the "User Profile" card's radio button group.
const activeVal = ref('overview')
function bgStyle(){
    let style = "background-image:url(" + props.bgUrl + "); margin-top:" + props.bgTop + "px;";
    return style;
}
</script>
<style lang="scss" scoped>
@import '@/scss/muse.scss';
</style>